<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

    <%-- Page d'acceuil affichant les 10 derniers dvds--%>

<div class="prodNav grid_16">
    <div class="prodHeadline grid_12 alpha">
        <h3>Last Ten Games Released</h3>
    </div>
</div>
<%-- Defilement des grandes images--%>
<div class="products productsWarp grid_16">
    <c:forEach var="jv" items="${requestScope.jeuxVideo}">
        <a href="?page=product&amp;id=${jv.id}" title="${jv.title} - ${jv.categorie.name} - $${jv.price}">
            <img src="${jv.image.large.url}" width="${jv.image.large.width}" height="${jv.image.large.height}" alt="" class="large_image" />
        </a>
    </c:forEach>
    <div class="nextprev">
        <a class="backward"></a>
        <a class="forward"></a>
    </div>
</div>
<%-- Affichage des petites images des 10 dvds--%>
<div class="productThumb">
    <c:forEach var="jv" items="${requestScope.jeuxVideo}">
        <img src="${jv.image.small.url}" width="${jv.image.small.width}" height="${jv.image.small.height}" alt="" class="medium_image draggable" id="${jv.id}" />
    </c:forEach>
</div>
<script type="text/javascript">
    // Slide Show pour les grandes images
    $(function() {
        $('.productThumb').tabs('.productsWarp > a', {
            rotate: true
        }).slideshow({
            autoplay: true,
            clickable: false
        });
    });
</script>